<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>心理诱导实时监测</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
{#style="text-align: center;"#}
<script>
</script>

<body class="pear-container">
<style>
     tr{ list-style-type:none;}
     img{ border:none; max-width: 100%;}
     .map4{ width: 100%; height:4.3rem;  position: relative; left: -50%; top: 2%ajax_polling; margin-top: .2rem; z-index: 5;}
     .map1,.map2,.map3{ position:absolute;}
     .map1{ width:35%; z-index: 2;top:36.8%; left: 32.5%;  animation: myfirst2 15s infinite linear;}
     .map2{ width:33%; top:38.5%; left: 33.5%; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
     .map3{ width:30%; top:40%; left: 35%; z-index: 1;}
    @keyframes myfirst2
    {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
   }
    @keyframes myfirst
   {
    from {transform: rotate(0deg);}
    to {transform: rotate(-359deg);}
   }

</style>

<div class="layui-row layui-col-space10"
     style="overflow: hidden;background: url('/static/images/bgImage.png');height: auto;width: auto">
    <div class="header"
         style="text-align: center; background: url('/static/images/first_title.png') no-repeat;height: 70px;width: 500px;margin-top: 10px;background-size: 100% 100%;margin: auto">
        <p style="text-align: center;font-size: 30px;color: white;padding-top:20px;font-weight: bold">心理诱导实时监测</p>
    </div>


    <div class="layui-card-body"
         style="margin-top: 10px;width: 100%;height: 100%;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
        <div class="layui-card"
             style="z-index:100;position:relative;float: left; width: 65%;margin-top: 10px;margin-left: 10px;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
            <div class="layui-col-md12" style="margin: 2%;width: 96%">
                <div class="layui-card">
                    <div class="layui-card-header">心理诱导与情景互动实时数据</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="min-height:400px"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-card"
             style="background-color: rgba(255,255,255,0%);float: right;width: 30%;margin-top: 10px;margin-right: 10px;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box;position:relative;z-index:100">
            <div class="layui-card-header" style="color: white">实时训练数据</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line" style="background-color: rgba(255,255,255,0%);color: white">
                    <tbody>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>作训警员</td>
                        <td>{{ status.user_name }}</td>
                    </tr>
                    <tr>
                        <td>警员编号</td>
                        <td>{{ status.user_code }}</td>
                    </tr>
                    <tr>
                        <td>训练开始时间</td>
                        <td>{{ status.time }}</td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <form class="layui-form">
                <div class="layui-card-header" style="background:white ">实时训练控制</div>
                <div class="layui-form-item" style="background:white">
                    <label class="layui-form-label">天气选择</label>
                    <div class="layui-input-block">
                      <select id="weather" name="weather" lay-submit lay-filter="weather">
                        <option value="sunny">晴天</option>
                        <option value="rainy">雨天</option>
                      </select>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">自动监测</label>
                        <div class="layui-input-block">
                          <input type="checkbox" id="open" name="open" lay-skin="switch" lay-filter="switchTest" title="自动|手动" checked="">
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="map" style="text-align: center; margin-top: 45%">
            <div class="map1"><img src="/static/images/lbx.png"></div>
            <div class="map2"><img src="/static/images/jt.png"></div>
            <div class="map3"><img src="/static/images/map.png"></div>
            <!--                    <p style="width: 100%;margin-bottom:6%;text-align: center; color: #0174f5;font-weight: bold;font-size:50px">训练中...</p>-->

        </div>
    </div>


</div>
{% include 'admin/common/footer.html' %}
<script src="/static/idata/js/jquery-3.3.1.min.js"></script>
<script src="{{ url_for('static', filename='/admin/component/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='/admin/component/pear/pear.js') }}"></script>

<script>

layui.use(['layer','slider','form','carousel','echarts', 'popup'], function () {
var $ = layui.jquery;
let echarts = layui.echarts;
let popup = layui.popup;
let form=layui.form


var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

    /*进入页面的时候，获取当前天气状态以及是否自动控制*/
    $('#weather').val("{{ status.weather }}")
    if ("{{ status.control }}" == "auto") {
        // 使用 jQuery 更改 checkbox 的状态
        $('#open').prop('checked', true);
        $('#weather').prop('disabled', true);
    } else {
        // 使用 jQuery 更改 checkbox 的状态
        $('#open').prop('checked', false);
        $('#weather').prop('disabled', false);
    }
// 通知 layui 重新渲染 switch 组件
    form.render();


form.on('select(weather)',function(data){
    $.ajax({
            type:'POST',
            url: "/admin/psych_realtime/control/{{ status.id }}",
            dataType: 'json',
            processData: false,
            contentType: 'application/json',
            data:JSON.stringify({weather:$('#weather option:selected').val()}),
        })
})

form.on('switch(switchTest)',function(data){
    let operate
    if (data.elem.checked) {
        operate = "auto"
    } else{
        operate = "manual"
    }
    $.ajax({
            type:'POST',
            url: "/admin/psych_realtime/auto_control/{{status.id}}",
            dataType: 'json',
            processData: false,
            contentType: 'application/json',
            data:JSON.stringify({autoControl:operate}),
        success: function (data) {
            // 如果是自动，则禁用天气选择按钮
            if (operate == "auto") {
                $('#weather').prop('disabled', true);
            }
            // 如果是手动，则启用天气选择按钮
            else {
                $('#weather').prop('disabled', false);
            }
            form.render('select')
        }
        })
})


$("body").on("click", "[data-url]", function () {
    parent.layui.tab.addTabOnlyByElem("content", {
        id: $(this).attr("data-id"),
        title: $(this).attr("data-title"),
        url: $(this).attr("data-url"),
        close: true
    })
})


let bgColor = "#fff";
let color = [
    "#0090FF",
    "#36CE9E",
    "#FFC005",
    "#FF515A",
    "#8B5CFF",
    "#00CA69"
];
    let echartData = [
        {
            name: "{{time_now}}",
            heart: {{data.data[0].heart}},
            oxygen: {{data.data[0].oxygen}},
            breathe:{{data.data[0].breathe}},
            pressure:{{data.data[0].pressure}},
        },
    ];

var xAxisData = echartData.map(v => v.name);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
var yAxisData1 = echartData.map(v => v.heart);
// [100, 138, 350, 173, 180, 150, 180, 230]
var yAxisData2 = echartData.map(v => v.oxygen);
// [233, 233, 200, 180, 199, 233, 210, 180]
var yAxisData3 = echartData.map(v => v.breathe);
var yAxisData4 = echartData.map(v => v.pressure);

const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
        rgbaColor =
            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
}

option = {
    backgroundColor: bgColor,
    color: color,
    legend: {
        right: 10,
        top: 10
    },
    tooltip: {
        trigger: "axis",
        formatter: function (params) {
            let html = '';
            params.forEach(v => {
                html +=
                    `<div style="color: #666;font-size: 14px;line-height: 24px">
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                            ${v.seriesName}.${v.name}
                            <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                            `;
            })


            return html
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: '#ffffff',
                shadowColor: 'rgba(225,225,225,1)',
                shadowBlur: 5
            }
        }
    },
    grid: {
<!--            top: 30,-->
        left: 0,
<!--            width:80%,-->

        containLabel: true
    },
    xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: "#333"
            }
        },
        axisLine: {
            margin:3,
            lineStyle: {
                color: "#D9D9D9"
            }
        },
        data: xAxisData
    }],
    yAxis: [
    {
      type: 'value',
      name: '心率',
      min:50,
      max:180,
      position: 'left',
      offset:-50,
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: color[0]
        }
      },
      axisLabel: {
        formatter: '{value}次/分'
      }
    },
    {
      type: 'value',
      name: '血氧',
      min:60,
      max:100,
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: color[1]
        }
      },
      axisLabel: {
        formatter: '{value}%'
      }
    },
    {
      type: 'value',
      name: '呼吸频率',
      min:10,
      max:80,
      position: 'right',
      offset: -50,
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: color[2]
        }
      },
      axisLabel: {
        formatter: '{value}次/分'
      }
    },
    {
      type: 'value',
      name: '压力',
      min:0,
      max:100,
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: color[3]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    }
    ],
    series: [{
        name: "心率",
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: hexToRgba(color[0], 0.3)
                    },
                        {
                            offset: 1,
                            color: hexToRgba(color[0], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
            }
        },
        yAxisIndex: 0,
        data: yAxisData1
    },
    {
        name: '血氧',
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: hexToRgba(color[1], 0.3)
                    },
                        {
                            offset: 1,
                            color: hexToRgba(color[1], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[1], 0.1),
                shadowBlur: 10
            }
        },
        yAxisIndex: 1,
        data: yAxisData2
    },
    {
        name: '呼吸频率',
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[2],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[2], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: hexToRgba(color[2], 0.3)
                    },
                        {
                            offset: 1,
                            color: hexToRgba(color[2], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[2], 0.1),
                shadowBlur: 10
            }
        },
        yAxisIndex: 2,
        data: yAxisData3
    },
    {
        name: '压力',
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[3],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[3], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: hexToRgba(color[3], 0.3)
                    },
                        {
                            offset: 1,
                            color: hexToRgba(color[3], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[3], 0.1),
                shadowBlur: 10
            }
        },
        yAxisIndex: 3,
        data: yAxisData4
    }
    ]
};

echartsRecords.setOption(option);

window.onresize = function () {
    echartsRecords.resize();
};

setInterval(ajaxPolling, 1000 * 2);

function ajaxPolling() {
    $.ajax({
        url: "/admin/psych_realtime/polling2/{{user_id}}",

        success: function (data) {
            echartData.push({
                name: data.time_now,
                heart: data.data.data[0].heart,
                oxygen: data.data.data[0].oxygen,
                breathe: data.data.data[0].breathe,
                pressure: data.data.data[0].pressure
            });
            if (echartData.length > 8) {
                echartData.shift();
            }


            xAxisData = echartData.map(v => v.name);
            yAxisData1 = echartData.map(v => v.heart);
            yAxisData2 = echartData.map(v => v.oxygen);
            yAxisData3 = echartData.map(v => v.breathe);
            yAxisData4 = echartData.map(v => v.pressure);

            option.xAxis[0].data = xAxisData;
            option.series[0].data = yAxisData1;
            option.series[1].data = yAxisData2;
            option.series[2].data = yAxisData3;
            option.series[3].data = yAxisData4;

            echartsRecords.setOption(option);

            $(function(){
                $("tbody > tr:nth-child(5) > td:nth-child(2)").text(data.heart+"次/分")
                $("tbody > tr:nth-child(6) > td:nth-child(2)").text(data.oxygen+"%");
                $("tbody > tr:nth-child(7) > td:nth-child(2)").text(data.breathe+"次/分");
                $("tbody > tr:nth-child(8) > td:nth-child(2)").text(data.pressure+"级");
            });

        },
        error: function (xhr, type, errorThrown) {
            popup.failure("api错误");
        }
    })


}


});






</script>
</body>
</html>